<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/foot.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath}/css/head2.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/registerAndLogin.css"/>
    
    <script src="${pageContext.request.contextPath}/script/jquery-1.11.3.js"></script>
	<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/script/jquery.validate.js"></script>
    <script src="${pageContext.request.contextPath}/script/additional-methods.min.js"></script>
    <script src="${pageContext.request.contextPath}/script/additional-methods.extend.js"></script>
    <script type="text/javascript">
	    /* 导航条 */
	    $(window).scroll(function () {
	        if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");
	        }else {$(".navbar-fixed-top").removeClass("top-nav");}
	    });
        $(function(){
        	
        	/*表单验证 开始*/
            $("#loginForm").validate({
                rules:{
                    login_username:{
                        required:true
                    },
                    login_password:{
                        required:true
                    }
                },
                messages:{
                    login_username:{
                        required:"请输入用户名"
                    },
                    login_password:{
                        required:"请输入密码"
                    }
                }
            });
        	$("input").keypress(function(){
        		$(".errorInfo").text("");
        	});
            $("#registerForm").validate({
                rules: {
                    register_username: {
                        required: true,
                        remote:"RegisterAndLoginServlet.html"
                    },
                    email:{
                        required: true,
                        email:true
                    },
                    phone:{
                        required: true,
                        isMobile:true
                    },
                    register_password:{
                        required: true,
                        rangelength:[6,12],
                        stringCheck:true
                    },
                    register_confirmPassword:{
                        required: true,
                        equalTo:"#register_password"
                    }

                },
                messages:{
                    register_username: {
                        required: "请填写用户名",
                        remote:"用户名已被注册"
                    },
                    email:{
                        required:"请填写邮箱",
                        email:"请填写正确的邮箱格式"
                    },
                    phone:{
                        required: "请填写电话号码",
                        isMobile:"请输入正确的电话号码"
                    },
                    register_password:{
                        required: "请输入密码",
                        rangelength:"输入长度必须介于 6 和 12 之间的字符串",
                        stringCheck:"只能包含中文、英文、数字、下划线等字符"
                    },
                    register_confirmPassword:{
                        required: "请再次输入密码",
                        equalTo:"两次输入的密码不一致"
                    }
                }
            });
            /*表单验证 结束*/
        });
      
    </script>
</head>
<body>
	<div class="container">
	    <!-- 回到顶部 开始-->
		<c:import url="/shared/returnTop.jsp" />
	    <!--回到顶部 结束-->
	    
	    <!--导航-->
		<c:import url="/shared/header.jsp" />
	    <!--导航结束-->
	    
	    <!--中间部分-->
	    <div class="row">
	        <div class="col-md-4"></div>
	        <div class="col-md-4 pxr_formCol">
	            <div class="tabbable" id="tabs-408085">
	                <ul class="nav nav-tabs">
	                    <li class="active pxr_tabWidth">
	                        <a class="white" href="#panel-837737" data-toggle="tab">登录</a>
	                    </li>
	                    <li class="pxr_tabWidth">
	                        <a class="white" href="#panel-451702" data-toggle="tab">注册</a>
	                    </li>
	                </ul>
	                <div class="tab-content pxr_tab-content">
	                    <div class="tab-pane active" id="panel-837737">
	                        <!--登录-->
	                        <form id="loginForm" method="post" action="RegisterAndLoginServlet.html">
	                            <table class="pxr_login_table">
	                                <tr>
	                                    <td class="pxr_lab"><label>用户名</label></td>
	                                    <td>&nbsp;&nbsp;<input autofocus="" name="login_username" type="text" value="${login_username}"/></td>
	                                </tr>
	                                
	                                <tr>
	                                    <td class="pxr_lab"><label>密码</label></td>
	                                    <td>&nbsp;&nbsp;<input name="login_password" type="password"/></td>
	                                </tr>
	                                <tr>
	                                    <td class="pxr_lab"><label></label></td>
	                                    <td>&nbsp;&nbsp;<input type="submit" value="登录" style="width:100px;height:30px;line-height:30px;background-color:#cd2626;color:white;border-style:hidden;"/><span class="pxr_lab errorInfo">${loginError}</span></td>
	                                </tr>
	                            </table>
	                        </form>
	                        <!--登录结束-->
	                    </div>
	                    <div class="tab-pane" id="panel-451702">
	                        <!--注册-->
	                        <form id="registerForm" method="post" action="RegisterAndLoginServlet.html">
	                            <table class="pxr_register_table">
	                                <tr>
	                                    <td class="pxr_lab"><label>用户名</label></td>
	                                    <td>&nbsp;&nbsp;<input name="register_username" type="text"/></td>
	                                </tr>
	                                <tr>
	                                    <td class="pxr_lab"><label>密码</label></td>
	                                    <td>&nbsp;&nbsp;<input id="register_password" name="register_password" type="password"/></td>
	                                </tr>
	                                <tr>
	                                    <td class="pxr_lab"><label>确认密码</label></td>
	                                    <td>&nbsp;&nbsp;<input name="register_confirmPassword" type="password"/></td>
	                                </tr>
	                                <tr>
	                                    <td class="pxr_lab"><label>邮箱</label></td>
	                                    <td>&nbsp;&nbsp;<input name="email" type="email"/></td>
	                                </tr>
	                                <tr>
	                                    <td class="pxr_lab"><label>电话</label></td>
	                                    <td>&nbsp;&nbsp;<input name="phone" type="text"/></td>
	                                </tr>
	                                <tr>
	                                    <td class="pxr_lab"><label></label></td>
	                                    <td>&nbsp;&nbsp;<input type="submit" value="注册" style="width:100px;height:30px;line-height:30px;background-color:#cd2626;color:white;border-style:hidden;"/></td>
	                                </tr>
	                            </table>
	                        </form>
	                        <!--注册结束-->
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="col-md-4"></div>
	    </div>
	    <!--中间部分结束-->
	    
	    <!--尾部-->
		<c:import url="/shared/footer.jsp" />
		<!--尾部结束-->
	</div>
</body>
</html>